<template>
  <div v-if="data">
    <div class="row q-gutter-md items-center">
      <div class="col-auto">
        <q-icon :name="`img:flags/${data.location}.svg`" size="sm" />
      </div>
      <div class="col text-caption">
        <div class="row">
          <div class="col-12">
            {{ (typeof data.description === 'object') ? getLanguageText(data.description, $i18n.locale) : data.description }}
          </div>
          <div class="col-12 text-caption text-grey">
            {{ data.version }}
          </div>
        </div>
      </div>
      <div class="col-auto">
        <q-btn flat round icon="file_copy" @click="copyAddress(data.value)" />
      </div>
    </div>
    <q-dialog v-model="isCopyDialogDisplay" v-close-popup>
      <q-card class="q-pa-md" style="width: 60%; min-width: 350px">
        <q-input readonly v-model="copyValue" :hint="$t('addressCard.copyDialog.hint')" />
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import { getLanguageText } from "src/lib/Utils";
  import { copyToClipboard } from 'quasar';
  export default {
    name: "AddressCard",
    props: {
      data: {
        type: Object
      }
    },
    data: function () {
      return {
        isCopyDialogDisplay: false
      };
    },
    computed: {
      copyValue: {
        get () {
          return this.data.value;
        }
      }
    },
    methods: {
      getLanguageText,
      copyAddress (v) {
        copyToClipboard(v)
          .then(() => {
            this.$q.notify({
              message: this.$t('public.success'),
              caption: this.$t('INFO_ADDRESS_COPY_SUCCESS'),
              icon: 'check'
            });
          })
          .catch(() => {
            this.isCopyDialogDisplay = true;
            this.$q.notify({
              message: this.$t('public.failed'),
              caption: this.$t('INFO_ADDRESS_COPY_FAILED'),
              icon: 'clear'
            });
          })
      }
    },
    async mounted() {
    }
  }
</script>

<style scoped>

</style>
